<!--
  功能：功能描述
  作者：王代彬
  时间：2020年11月26日 13:36:47
  版本：v1.0
-->
<template>
	<div>
		<h2>绘制多个</h2>
		<div v-for="(item, index) in dataList" :key="index" :id="`myChart${item.id}`"
			style="width: 300px; height: 300px; display: inline-block"></div>
	</div>
</template>

<script>
import echarts from './chart'
export default {
	data () {
		return {
			dataList: [
				{
					id: '1',
					title: '图一'
				},
				{
					id: '2',
					title: '图二'
				},
				{
					id: '3',
					title: '图三'
				}
			]
		}
	},
	methods: {
		drawMore (id) {
			let myChart = echarts.init(
				document.getElementById(`myChart${id}`)
			)
			// 绘制图表
			myChart.setOption({
				title: { text: `在Vue中使用echarts${id}` },
				tooltip: {},
				xAxis: {
					data: [
						'衬衫',
						'羊毛衫',
						'雪纺衫',
						'裤子',
						'高跟鞋',
						'袜子'
					]
				},
				yAxis: {},
				series: [
					{
						name: '销量',
						type: 'line',
						data: [5, 20, 36, 10, 10, 20],
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						}
					}
				]
			})
		}
	},
	mounted () {
		this.$nextTick(() => {
			this.dataList.forEach(item => {
				this.drawMore(item.id)
			})
		})
	}
}
</script>

<style lang='less' scoped>

</style>
